<template>
  <div class="dashboard-container">

    <el-row type="flex" align="center" :gutter="20" style="margin-top: 20px;flex-direction: row-reverse;">
      <el-form class="filterData-block" label-position="left" :inline="true" label-width="auto">
        <el-form-item >
          <el-date-picker
            v-model="time"
            value-format="yyyy-MM-dd HH:mm:ss"
            size="small"
            clearable
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            align="left"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button size="small" icon="el-icon-search" type="primary" @click="getStatisticsCount">搜索</el-button>
        </el-form-item>
      </el-form>
    </el-row>
    <el-row style="margin-top: 30px" class="row" :gutter="40">
      <div style="margin-left: 20px;font-weight: 700;font-size: 22px;">访问统计</div>
      <el-col :span="8">
        <el-card v-loading="countLoading" body-style="display:flex;align-items:center;width:100%;height:100%" class="box-card">
          <div class="icon-box">
            <div :style="'background:'+color[0]" class="icon">访</div>
          </div>
          <div class="count-box">
            <div class="label">今日访问量</div>
            <div class="value">{{ count.todayAccessCount }}</div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card v-loading="countLoading" body-style="display:flex;align-items:center;width:100%;height:100%" class="box-card">
          <div class="icon-box">
            <div :style="'background:'+color[3]" class="icon">总</div>
          </div>
          <div class="count-box">
            <div class="label">总访问量</div>
            <div class="value">{{ count.browseCount }}</div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row style="margin-top: 30px" class="row" :gutter="40">
      <div style="margin-left: 20px;font-weight: 700;font-size: 22px;">待处理数据</div>
      <el-col :span="8">
        <el-card v-loading="countLoading" body-style="display:flex;align-items:center;width:100%;height:100%" class="box-card">
          <div class="icon-box">
            <div :style="'background:'+color[0]" class="icon">招</div>
          </div>
          <div class="count-box" >
            <div class="label">未审核招聘人员</div>
            <div class="value">{{ count.nosUserCount }}</div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card v-loading="countLoading" body-style="display:flex;align-items:center;width:100%;height:100%" class="box-card">
          <div class="icon-box">
            <div :style="'background:'+color[8]" class="icon">岗</div>
          </div>
          <div class="count-box">
            <div class="label">
              未审核岗位数量
            </div>
            <div class="value">{{ count.publishWaitCount }}</div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card v-loading="countLoading" body-style="display:flex;align-items:center;width:100%;height:100%" class="box-card">
          <div class="icon-box">
            <div :style="'background:'+color[4]" class="icon">企</div>
          </div>
          <div class="count-box" >
            <div class="label">未审核参会企业</div>
            <div class="value">{{ count.nosJobFairCompany }}</div>
          </div>
        </el-card>
      </el-col>

    </el-row>
    <el-row style="margin-top: 30px" class="row" :gutter="40">
      <div style="margin-left: 20px;font-weight: 700;font-size: 22px;">业务统计</div>

      <el-col :span="8">
        <el-card v-loading="countLoading" body-style="display:flex;align-items:center;width:100%;height:100%" class="box-card">
          <div class="icon-box">
            <div :style="'background:'+color[0]" class="icon">公</div>
          </div>
          <div class="count-box">
            <div class="label">企业数</div>
            <div class="value">{{ count.enterpriseCount }}</div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card v-loading="countLoading" body-style="display:flex;align-items:center;width:100%;height:100%" class="box-card">
          <div class="icon-box">
            <div :style="'background:'+color[1]" class="icon">职</div>
          </div>
          <div class="count-box">
            <div class="label">职位数</div>
            <div class="value">{{ count.jobCount }}</div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card v-loading="countLoading" body-style="display:flex;align-items:center;width:100%;height:100%" class="box-card">
          <div class="icon-box">
            <div :style="'background:'+color[2]" class="icon">投</div>
          </div>
          <div class="count-box">
            <div class="label">投递简历数</div>
            <div class="value">{{ count.workAppCount }}</div>
          </div>
        </el-card>
      </el-col>


      <el-col :span="8">
        <el-card v-loading="countLoading" body-style="display:flex;align-items:center;width:100%;height:100%" class="box-card">
          <div class="icon-box">
            <div :style="'background:'+color[4]" class="icon">会</div>
          </div>
          <div class="count-box">
            <div class="label">招聘会数</div>
            <div class="value">{{ count.jobFairCount }}</div>
          </div>
        </el-card>
      </el-col>

      <el-col :span="8">
        <el-card v-loading="countLoading" body-style="display:flex;align-items:center;width:100%;height:100%" class="box-card">
          <div class="icon-box">
            <div :style="'background:'+color[5]" class="icon">用</div>
          </div>
          <div class="count-box">
            <div class="label">用户数</div>
            <div class="value">{{ count.customerCount }}</div>
          </div>
        </el-card>
      </el-col>

      <el-col :span="8">
        <el-card v-loading="countLoading" body-style="display:flex;align-items:center;width:100%;height:100%" class="box-card">
          <div class="icon-box">
            <div :style="'background:'+color[6]" class="icon">政</div>
          </div>
          <div class="count-box">
            <div class="label">政策数</div>
            <div class="value">{{ count.newsCount }}</div>
          </div>
        </el-card>
      </el-col>

      <el-col :span="8">
        <el-card v-loading="countLoading" body-style="display:flex;align-items:center;width:100%;height:100%" class="box-card">
          <div class="icon-box">
            <div :style="'background:'+color[7]" class="icon">招</div>
          </div>
          <div class="count-box">
            <div class="label">招聘人员数</div>
            <div class="value">{{ count.comRecruitersCount }}</div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card v-loading="countLoading" body-style="display:flex;align-items:center;width:100%;height:100%" class="box-card">
          <div class="icon-box">
            <div :style="'background:'+color[3]" class="icon">馈</div>
          </div>
          <div class="count-box">
            <div class="label">意见反馈数</div>
            <div class="value">{{ count.opinionCount }}</div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row style="margin-top: 30px" class="row" :gutter="40">

      <el-col :span="24">
        <el-card v-loading="chartData.chart1.loading" body-style="display:flex;align-items:center;width:100%;height:100%" class="box-card chart-card">
          <div class="chart" id="place-types-distribution-chart"></div>
        </el-card>
      </el-col>
      <el-col :span="24" >
        <el-card v-loading="chartData.chart2.loading" body-style="display:flex;align-items:center;width:100%;height:100%" class="box-card chart-card">
          <div class="chart" id="15days-sweep"></div>
        </el-card>
      </el-col>

      <el-col :span="24">
        <el-card v-loading="chartData.chart1.loading" body-style="display:flex;align-items:center;width:100%;height:100%" class="box-card chart-card">
          <div class="chart" id="seven-says-browse"></div>
        </el-card>
      </el-col>

      <el-col :span="24">
        <el-card v-loading="chartData.chart1.loading" body-style="display:flex;align-items:center;width:100%;height:100%" class="box-card chart-card">
          <div class="chart" id="7days-sweep-customer"></div>
        </el-card>
      </el-col>


    </el-row>

  </div>
</template>

<script>
import { getDashboardDataApi,getJobPublishCensus,getWorkApplyByTime,getSevenSaysBrowseApi,getSevenSaysCustomerApi } from '@/api/dashboard'
import * as ECharts from "echarts";
export default {
  name: 'Dashboard',
  data() {
    return {
      count: {
        category:[],
      },
      type: 0,
      chartColor:['#67e6d4','#fe8e86','#26c6ff','#fda864','#4addc6','#f39a50','#f833a1','#7289f4','#4cc3ff','#67e6d4'],
      color: ['#fdd22c', '#898ced', '#fe8e86', '#26c6ff', '#fda864', '#4addc6','#f833a1','#67e6d4',"#898ced",'#fe8e86'],
      countLoading:true,
      chartData:{
        chart1:{
          chart:null,
          loading:true
        },
        chart2:{
          chart:null,
          loading:true
        },
        chart3:{
          chart:null,
          loading:true
        },
        chart4:{
          chart:null,
          loading:true
        },
      },
      time:[],
    }
  },
  mounted() {
    this.getStatisticsCount()
    //this.getBackground();//暂时不用随机颜色
    this.initChart1();
    this.initChart2();
    this.initChart3();
    this.initChart4();
    //监听窗口resize
    window.onresize=()=>{
      Object.keys(this.chartData).forEach((item)=>{
        this.chartData[item].chart&&this.chartData[item].chart.resize()
      })
    }
  },
  watch:{//监听
    type:{
      handler(){
        this.getStatisticsCount()
      },
      immediate:true,//深度监听
    }
  },
  methods: {
    toPush(url)
    {
      this.$router.push({path: url})
    },
    initChart1(){
      this.chartData.chart1.chart=ECharts.init(document.getElementById('place-types-distribution-chart'));
      let option={
        title: {
          text: '近7天发布岗位数',
          left:'center',
          textStyle: {
            color: '#26c6ff',
            fontSize: 17,
          }
        },
        tooltip:{
          trigger:'axis',
          axisPointer:{
            type:'shadow'
          }
        },
        grid:{
          top:'15%',
          right:'3%',
          bottom:'10%',
          left:'3%',
        },
        xAxis: {
          type: 'category',
          data: [],
          axisLabel: {
            textStyle: {
              color: '#000',
              fontSize: '11'
            },
            interval: 0
          }
        },
        yAxis: {
          type: 'value',
          show:true,
          name:'单位 - 个',
          nameTextStyle:{
            color:'#000',
          },
          axisLabel: {
            textStyle: {
              color: '#000',
              fontSize: '11'
            }
          }
        },
        color:['#67e6d4'],
        series: [
          {
            data: [],
            name:'岗位数',
            type: 'bar',
            barWidth:20,
          }
        ]
      }
      getJobPublishCensus().then((res)=>{
        console.log(res.xdata);
        option.xAxis.data=res.xdata;
        option.series[0].data=res.ydata;
        this.chartData.chart1.chart.setOption(option);
        this.chartData.chart1.loading=false;
      })

    },
    initChart2(){
      this.chartData.chart2.chart=ECharts.init(document.getElementById('15days-sweep'));
      let option={
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        title: {
          text: '近7天投递简历数',
          left:'center',
          textStyle: {
            color: '#26c6ff',
            fontSize: 17,
          }
        },
        grid:{
          top:'15%',
          right:'3%',
          bottom:'10%',
          left:'3%',
        },
        xAxis: {
          data:  [],//横轴数据
          axisLabel: {
            textStyle: {
              color: '#000',
              fontSize: '11'
            },
            formatter: function (value) {
              return value.slice(5,10);
            }
          },
        },
        yAxis: {
          show:true,
          name:'单位 - 次',
          nameTextStyle:{
            color:'#000',
          },
          axisLabel: {
            textStyle: {
              color: '#000',
            }
          }
        },
        color: ['#7289f4'],
        series: [{
          name: '投递次数',
          type: 'line',
          data: [],//y轴数据
        }]
      }
      getWorkApplyByTime().then((res)=>{
        option.xAxis.data=res.xdata;
        option.series[0].data=res.ydata;
        this.chartData.chart2.chart.setOption(option);
        this.chartData.chart2.loading=false;
      })
    },
    initChart3(){
      this.chartData.chart3.chart=ECharts.init(document.getElementById('seven-says-browse'));
      let option={
        title: {
          text: '近7天访问数',
          left:'center',
          textStyle: {
            color: '#26c6ff',
            fontSize: 17,
          }
        },
        tooltip:{
          trigger:'axis',
          axisPointer:{
            type:'shadow'
          }
        },
        grid:{
          top:'15%',
          right:'3%',
          bottom:'10%',
          left:'3%',
        },
        xAxis: {
          type: 'category',
          data: [],
          axisLabel: {
            textStyle: {
              color: '#000',
              fontSize: '11'
            },
            interval: 0
          }
        },
        yAxis: {
          type: 'value',
          show:true,
          name:'单位 - 人',
          nameTextStyle:{
            color:'#000',
          },
          axisLabel: {
            textStyle: {
              color: '#000',
              fontSize: '11'
            }
          }
        },
        color:['#67e6d4'],
        series: [
          {
            data: [],
            name:'浏览数',
            type: 'bar',
            barWidth:20,
          }
        ]
      }
      getSevenSaysBrowseApi().then((res)=>{
        option.xAxis.data=res.xdata;
        option.series[0].data=res.ydata;
        this.chartData.chart3.chart.setOption(option);
        this.chartData.chart3.loading=false;
      })

    },
    initChart4(){
      this.chartData.chart4.chart=ECharts.init(document.getElementById('7days-sweep-customer'));
      let option={
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        title: {
          text: '近7天新增用户数',
          left:'center',
          textStyle: {
            color: '#26c6ff',
            fontSize: 17,
          }
        },
        grid:{
          top:'15%',
          right:'3%',
          bottom:'10%',
          left:'3%',
        },
        xAxis: {
          data:  [],//横轴数据
          axisLabel: {
            textStyle: {
              color: '#000',
              fontSize: '11'
            },
            formatter: function (value) {
              return value.slice(5,10);
            }
          },
        },
        yAxis: {
          show:true,
          name:'单位 - 人',
          nameTextStyle:{
            color:'#000',
          },
          axisLabel: {
            textStyle: {
              color: '#000',
            }
          }
        },
        color: ['#7289f4'],
        series: [{
          name: '新增人数',
          type: 'line',
          data: [],//y轴数据
        }]
      }
      getSevenSaysCustomerApi().then((res)=>{
        option.xAxis.data=res.xdata;
        option.series[0].data=res.ydata;
        this.chartData.chart4.chart.setOption(option);
        this.chartData.chart4.loading=false;
      })
    },
    getStatisticsCount() {
      let startTime = '';
      let endTime = '';
      if(this.time!=null)
      {
        startTime = this.time[0];
        endTime = this.time[1];
      }
      getDashboardDataApi({startTime: startTime,endTime: endTime}).then((res) => {
          this.count = res
      }).finally(() => {
        this.countLoading=false;
      })
    },
    getBackground() {
      const color = []
      for (let i = 0; i < 20; i++) {
        const index = Math.floor(Math.random() * (5))
        color.push(this.color[index])
      }
      this.color=color
    }
  }
}
</script>

<style lang="scss" scoped>
.el-col-8{
  width: 25%;
  padding-top: 30px;
}
.el-col-24{
  width: 50%;
  padding-top: 30px;
}
.dashboard-container {
  padding: 0 30px;
  .chart{
    width: 100%;
    height: 100%;
  }
  .row {
    margin-top: 20px;
    .box-card.chart-card{
      height: 300px;
    }
    .box-card {
      display: flex;
      align-items: center;
      height: 100px;
      .icon-box{
        width: 50px;
        height: 50px;
        margin-left: 20px;
        .icon{
          width: 100%;
          height: 100%;
          border-radius: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 24px;
          color: #fff;
        }
      }
      .count-box{
        width: calc(100% - 70px);
        display: flex;
        flex-direction: column;
        align-items:center;
        .label{
          color: rgba(0,0,0,.45);
          font-size: 16px;
          margin-bottom: 12px;
          font-weight: 700;
        }
        .value{
          font-weight: 700;
          font-size: 22px;
        }
      }
    }
  }
}

</style>
